import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Layout, Menu, Icon } from 'antd';
import { Link } from 'react-router';
import * as DataName from "../../action/DataNameConfig";
import { Tool } from "../../utils/Tool";
const { Sider } = Layout;
const { SubMenu } = Menu;
let blankLink = ['/base/service/index'];
class SiderCustom extends Component {
    constructor(props){
        super(props);
        /* 获取数据类型 */
        this.loginOut=()=>{
            //dispatch(loginOut());
            //hashHistory.push("/login");
        }
        this.state = {
            user: '',
            collapsed: false,
            mode: 'inline',
            openKey: '',
            selectedKey: ''
        };
        this.setSessionName=(domain)=>{
            Tool.setSession("domainName",domain);
        }
        /*this.onSelect=({ item })=>{
            console.log(item.props.subMenuKey);
            this.setState({
                openKey:item.props.subMenuKey.slice(0,-6)
            })
        }*/
    }

    componentWillMount() {
    };

    componentDidMount() {
        this.setMenuOpen(this.props);
        this.setState({
            collapsed: false,
            mode: 'inline',
        });
    }
    componentWillReceiveProps(nextProps) {
        this.onCollapse(nextProps.collapsed);
        this.setMenuOpen(nextProps);
    }
    setMenuOpen =(props)=> {
        const {path} = props;
        let { BaseData } = this.props;
        this.setState({
            openKey: path.substr(0, path.lastIndexOf('/')),//
            selectedKey: BaseData[DataName.MENU_OPEN_KEY] || path
        });
    };
    onCollapse = (collapsed) => {
        this.setState({
            collapsed,
            mode: collapsed ? 'vertical' : 'inline',
        });
    };
    menuClick = e => {
        if(!blankLink.includes(e.key)){
            this.setState({
                selectedKey: e.key
            });
        }
        const { popoverHide } = this.props;     // 响应式布局控制小屏幕点击菜单时隐藏菜单操作
        popoverHide && popoverHide();
    };
    openMenu = v => {
        this.setState({
            openKey: v[v.length - 1]
        })
    };
    render() {
        let { User, BaseData } = this.props;
        return (
            <Sider
                trigger={null}
                breakpoint="lg"
                collapsible
                collapsed={this.props.collapsed}
                onCollapse={this.onCollapse}
                style={{overflowY: 'auto'}}
                width="256"
            >
                <div className="logo">
                    <img alt="logo" src={User&&User.saasOrg?User.saasOrg.avatar:""} />
                    <span>{User&&User.saasOrg?User.saasOrg.dept_name:""}</span>
                </div>
                <Menu
                    onClick={this.menuClick}
                    theme="dark"
                    mode="inline"
                    selectedKeys={[BaseData[DataName.MENU_OPEN_KEY]]}
                    openKeys={this.state.collapsed?[this.state.openKey]:["/app/user","/app/project"]}
                    onOpenChange={this.openMenu}
                    inlineCollapsed = {false}
                >
                    <SubMenu
                        key="/app/user"
                        title={<span><Icon type="appstore" /><span className="nav-text">用户管理</span></span>}
                    >
                        <Menu.Item key="/app/company/list">
                            <Link to={ '/app/company/list' }>企业列表</Link>
                        </Menu.Item>
                        <Menu.Item key="/app/admin/list">
                            <Link to={ '/app/admin/list' }>管理员列表</Link>
                        </Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key="/app/project"
                        title={<span><Icon type="bars" /><span className="nav-text">固废管理</span></span>}
                    >
                        <Menu.Item key="/app/notify">
                            <Link to={ '/app/notify' }>异常通知</Link>
                        </Menu.Item>
                        <Menu.Item key="/app/order/list">
                            <Link to={ '/app/order/list' }>申报列表</Link>
                        </Menu.Item>
                    </SubMenu>
                </Menu>
                <style>
                    {`
                    #nprogress .spinner{
                        left: ${this.state.collapsed ? '70px' : '206px'};
                        right: 0 !important;
                    }
                    `}
                </style>
            </Sider>
        )
    }
}

export default connect(state=>({
    User: state.User,
    SystemConfig:state.SystemConfig,
    BaseData: state.BaseData
}))(SiderCustom);